<template>
	<view class="content">
		<view class="custom-navigation-bar" :style="{height: statusBarHeight+'px'}"></view>
		<!-- 搜索框区域 -->
		<view class="sraech">
			<view class="left-box">
				<uni-icons type="search" color="#3cc882" size="21"></uni-icons>
				<text class="placeholder">搜索食材或菜品名称</text>
			</view>
			<view class="search-button">
				搜索
			</view>
		</view>
		
			<!-- 筛选区域 -->
			<view class="filter-box">
				<view class="can-buy-box">
					<uni-icons type="shop" color="#3cc882" size="17"></uni-icons>
					<text>可买食材</text>
					<uni-icons type="bottom" size="17"></uni-icons>
				</view>
				<view class="sort-box">
					<text>综合排序</text>
					<uni-icons type="bottom" size="17"></uni-icons>
				</view>
				<view class="screen-box">
					<text>筛选</text>
					<image src="@/static/filter.png" style="width: 30rpx;" mode="widthFix"></image>
				</view>
			</view>
			<!-- 商品列表区域 -->
			<view class="goods-container">
				<view class="goods-list-box">
						
						
						<view class="goods-item-box">
							<image class="img" src="@/static/img01.png" mode="widthFix"></image>
							<view class="goods-tags">
								<view class="item-name">
									<uni-icons type="shop" color="#3cc882" size="17"></uni-icons>
									<text class="name">土豆牛腩</text>
								</view>
								<text class="time">约15~20分钟 | 有点挑战</text>
								<view class="user-box">
									<view class="user">
										<view class="head">
											
										</view>
										<text>我爱罗</text>
									</view>
									<view class="love-num">
										<image class="love" src="@/static/love01.png"></image>
										<text style="margin-left: 3px;">3.4k</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-item-box">
							<image class="img" src="@/static/img02.png" mode="widthFix"></image>
							<view class="goods-tags">
								<view class="item-name">
									<text class="name">爆炸无敌巨好吃的青椒烧土豆</text>
								</view>
								<text class="time">约15~20分钟 | 零厨艺</text>
								<view class="user-box">
									<view class="user">
										<view class="head">
											
										</view>
										<text>蜡笔小新</text>
									</view>
									<view class="love-num">
										<image class="love" src="@/static/love02.png"></image>
										<text style="margin-left: 3px;">2.9w</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-item-box">
							<image class="img" src="@/static/img03.png" mode="widthFix"></image>
							<view class="goods-tags">
								<view class="item-name">
									<uni-icons type="shop" color="#3cc882" size="17"></uni-icons>
									<text class="name">佳农超甜香蕉700g</text>
								</view>
								<text class="time">蕉香浓郁 | 进口高山蕉</text>
								<view class="user-box">
									<view class="user">
										<view class="head">
											
											
										</view>
										<text>香蕉700g</text>
									</view>
									<view class="love-num">
										<image class="love" src="@/static/love01.png"></image>
										<text style="margin-left: 3px;">3.4k</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-item-box">
							<image class="img" src="@/static/img04.png" mode="widthFix"></image>
							<view class="goods-tags">
								<view class="item-name">
									<uni-icons type="shop" color="#3cc882" size="17"></uni-icons>
									<text class="name">合集·就爱吃鸡</text>
								</view>
								<view class="user-box">
									<view class="user">
										<view class="head">
											
										</view>
										<text>动感光波</text>
									</view>
									<view class="love-num">
										<image class="love" src="@/static/love01.png"></image>
										<text style="margin-left: 3px;">942</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		
		
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0
			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync()
			this.statusBarHeight = res.statusBarHeight
		},
		methods: {

		}
	}
</script>

<style>
	.sraech {
		position: fixed;
		margin-left: 20rpx;
		padding-right: 5rpx;
		display: flex;
		background-color: #fff;
		align-items: center;
		justify-content: space-between;
		width: 515rpx;
		height: 65rpx;
		border: 2px solid #3cc882;
		border-radius: 40rpx;
	}
	.left-box {
		padding-left: 5px;
		display: flex;
		align-items: center;
	}
	.placeholder {
		font-size: 28rpx;
		color: #999;
		margin-left: 5px;
	}

	.search-button {
		width: 104rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background-color: #3cc882;
		border-radius: 30rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.filter-box {
		margin-top: 80rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		font-size: 26rpx;
		background-color: #fff;

	}

	.screen-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 134rpx;
		height: 52rpx;
		border: 1px solid #ebebeb;
		border-radius: 30rpx;

	}

.goods-container{
	height: 60%;
	background-color: #f5f7f6;
}
	.goods-list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 24rpx;
	}

	.img {
		width: 340rpx;

	}
	.love{
		width: 28rpx;
		height: 24rpx;
	}
	.name{
		font-size: 28rpx;
		font-weight: 700;
	}
	.goods-item-box{
		background-color: #fff;
		width: 340rpx;
		border-radius: 10px;
		margin-bottom: 5px;
	}
	.goods-tags{
		padding: 5px;
	}
	.time{
		font-size: 24rpx
	}
	.user-box{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx
	}
	.user{
		display: flex;
		align-items: center;
	}
	.love-num{
		display: flex;
		align-items: center;
	}
	.head{
		margin-right: 3px;
		width: 32rpx;
		height: 32rpx;
		background-color: red;
		border-radius: 50%;
	}
</style>